<template>
	<view class="loginpages" :style="{height: scrollHeight+'px',paddingTop: topHeight+'rpx'}">
		<u-modal v-model="modelShow" :content="modelContent"></u-modal>
		<common :tips='commonTips'></common>
		<view class="welcome">欢迎登录炎黄儿女</view>
		<view class="login-menu-box">
			<view class="login-menu">
				<view @click="tab(1)" class="login-button" :class="tabIndex==1 ? 'login-button-active':''">手机登录</view>
				<view @click="tab(0)" class="login-button" :class="tabIndex==0 ? 'login-button-active':''">账号登录</view>
			</view>
		</view>
		<u-form :model="form" class="login-form" label-width="150" :label-style="{textAlign: 'justify', textAlignLast: 'justify', display: 'inline-block', paddingRight:'10px'}" ref="uForm">
			<u-form-item v-if="tabIndex==0"  prop="username">
				<view class="logform">
					<u-input v-model="form.username" placeholder="请输入账号" name="username" />
				</view>
			</u-form-item>
			
			<u-form-item v-if="tabIndex==0" prop="password">
				<view class="logform">
					<u-input v-model="form.password" :password-icon="true" placeholder="请输入密码" type="password" name="password" />
				</view>
			</u-form-item>

			<u-form-item v-if="tabIndex==0" prop="captcha">
				<view class="logsend">
					<view class="logform_a">
						<u-input v-model="form.captcha" placeholder="请输入验证码" type="number"></u-input>
					</view>	
					<image @click="downloadCaptcha" class="captcha-img" :src="captchaPath" mode="widthFix"></image>							
				</view>		
			</u-form-item>
			
			<u-form-item v-if="tabIndex==1" prop="mobile">
				<view class="logform">
					<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" name="mobile" />
				</view>
			</u-form-item>
			<u-form-item v-if="tabIndex==1" prop="code">
				<view class="logsend">									
					<view class="logform_a">
						<u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
					</view>
					<!-- <u-button class="sendcodebtn" slot="right" type="primary" size="mini" @click="getCode">{{codeTips}}</u-button> -->
					<view class="sendcodebtn" @click="getCode">{{codeTips}}</view>
				</view>
			</u-form-item>
			<!-- <u-button @click="submit" :custom-style="loginFormButtonStyle" :ripple="true" :disabled="loginFormButtonDisabled" ripple-bg-color="rgba(45,211,232, 0.8)" shape="circle">
				<u-icon name="arrow-rightward"></u-icon>
			</u-button> -->
						
			<u-button :custom-style="loginFormButtonStyle" :ripple="true" :disabled="loginFormButtonDisabled" ripple-bg-color="rgba(192,46,54, 0.8)"  @click="submit">进入首页</u-button>
			
			
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</u-form>
		
		<view class="accordtag">
			<view class="radioview">
				<radio @tap="radioChange" :checked="isAgree" color="#c02e36 " />已阅读并同意
				<text @tap="totreaty" class="atag">《用户协议》</text>
				<text @tap="toprivacy" class="atag">《隐私政策》</text>
				并授权使用您的账号信息（如手机号、昵称、头像）以便您统一管理 您还可以选择{{close_dxtz==1?"关闭":"开启"}}<text class="atag" @tap="gbtsfun">定向推送功能</text>				
			</view>
			
		</view>
		  
		
		<showxieyi ref="showxieyi" @isclickty="isclickty"></showxieyi>
		
		
		<view class="login-footer-box">
			<!-- #ifdef MP-WEIXIN -->
			<view @tap="goindex" class="login-footer-box-left"  v-if="join == false">不登录，先逛逛</view>
			<!-- #endif -->			
			<view @click="goRegister" class="login-footer-box-left" v-if="join == false" >注册新用户</view>
			<view @click="goForget" class="login-footer-box-left" v-if="join == false" >忘记密码</view>
		</view>
		
		
		<privacypopup ref="privacypopup"></privacypopup>
		<!-- 小程序隐私弹窗 -->
		
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {
		photo_cdn
	} = config.baseUrl;
	import showxieyi from "@/components/showxieyi/showxieyi.vue"
	import {
		mapMutations
	} from "vuex"
	import privacypopup from "@/components/privacypopup/privacypopup.vue";
	import {familyList} from "@/utils/api/zupu.js";
	export default {
		components:{
			showxieyi,
			privacypopup,
		},
		data() {
			return {
				photo_cdn,
				isAgree:false,
				close_dxtz:"1",//关闭定向通知的开关  1开启中  2关闭中
				tabIndex: 1,
				family_id:'',
				form: {
					mobile: '',
					username: '',
					password: '',
					captcha: ''
				},
				rules: {
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
					username: [
						{
							required: true, 
							message: '请输入账号',
							trigger: ['change', 'blur']
						}
					],
					password: [
						{
							required: true,
							min: 6, 
							message: '请输入正确的密码', 
							trigger: 'blur'
						}
					],
					captcha: [
						{
							required: true,
							min: 4,
							message: '请输入正确的验证码',
							trigger: ['change', 'blur']
						}
					]
				},
				loginFormButtonStyle: {
					backgroundImage: `linear-gradient(to bottom right, ${this.$themecolor} , ${this.$themecolor})`,
					border: 'none',
					color: '#ffffff',
					outline: 'none',
					marginTop: '30rpx',
					width:'526rpx',
					height: '100rpx',
					fontSize:'36rpx',
					borderRadius:'72rpx'
				},
				loginFormButtonDisabled: false,
				modelShow: false,
				modelContent: '',
				codeTips: '请输入验证码',
				commonTips: '',
				captchaPath: '',
				scrollHeight:0,
				topHeight:0,
				join:false,
				//微信Code
				weixinCode:''
			}
		},
		onReady() {
			this.downloadCaptcha()
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.computeheight();
			
			//定向推送状态
			let close_dxtz =  uni.getStorageSync("close_dxtz");
			this.close_dxtz = close_dxtz?close_dxtz:"1";
			
		},
		onLoad(Option) {
			let istongyi = uni.getStorageSync('istongyi');
			if(istongyi){
				if(istongyi==true || istongyi=="true"){
					// this.isAgree = true;//获取之前同意过的状态
				}else{
					setTimeout(()=>{
						this.$refs.showxieyi.show();//第一次进来 提示
					},300)
				}
			}else{
				setTimeout(()=>{
					this.$refs.showxieyi.show();//第一次进来 提示
				},300)
			}
			if(Option.type){
				console.log("赋值")
				this.join = true;
			}
			
			// #ifdef MP-WEIXIN			
				this.getWeixinCode();
			// #endif
		},
		methods: {
			...mapMutations(['updatebaseItem']),
			//点击同意
			isclickty(){//弹窗的同意被点击后
				// this.isAgree = true;
				// uni.setStorageSync('istongyi', true);//存储用户同意过的状态
				
			},
			//微信小程序下获取code
			getWeixinCode(){
				uni.login({
				  provider: 'weixin',
				  success:res=>{
					  console.log(res)
					  this.weixinCode = res.code
					}
				})
			},
			//用户协议
			totreaty(){
				uni.navigateTo({
					url:"/pages/mine/agreement/agreementuser"
				})
			},
			//隐私政策
			toprivacy(){
				uni.navigateTo({
					url:"/pages/mine/agreement/agreement"
				})
			},
			//单选框
			radioChange(e){
				this.isAgree = !this.isAgree;
			},
			//关闭推送
			gbtsfun(){
				this.$showModal({
					title:'提示',
					concent:`你确定要${this.close_dxtz==1?"关闭":"开启"}推送消息吗?`,
					confirmVal:'确定',
					cancelVal:'取消',
				}).then(res=>{
					this.$api.msg("操作成功");
					if(this.close_dxtz==1){
						this.close_dxtz = 2;
					}else{
						this.close_dxtz = 1;
					}
					uni.setStorageSync("close_dxtz",this.close_dxtz)
				})
			},
			computeheight() {
				let resinfo = uni.getSystemInfoSync();
				let windowHeight = resinfo.windowHeight;
				this.scrollHeight = windowHeight;
				if(windowHeight>1000){
					this.topHeight = 100;
				}else{
					this.topHeight = 200;
				}
				console.log(windowHeight,'windowHeight')
			},
			tab: function (index) {
				this.tabIndex = index
			},
			downloadCaptcha: function() {
				var that = this
				that.form.captcha = ''
				that.$u.post('/addons/fastim/api.user/captchaPre', {}).then(res => {
					that.ws.captchaId = res.data.captcha_id;
					that.captchaPath = this.ws.buildUrl('default') + '/addons/fastim/api.user/captcha?captcha_id=' + res.data.captcha_id
				}).catch(res => {
					that.$u.toast('验证码请求失败，请重试！');
				})
			},
			getCode: function () {
				var that = this
				if (!that.form.mobile) {
					that.$u.toast('请输入手机号');
					return ;
				}
				if(that.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					that.$u.post('/api/sms/send', {
						event: 'login',
						mobile: that.form.mobile
					}).then(res => {
						console.info('res',res);
						if(res.data.sms_code){//测试验证码
							this.form.code = res.data.sms_code;
						}
						if (res.code == 1) {
							uni.hideLoading();
							that.$u.toast('验证码已发送');
							that.$refs.uCode.start();
						} else {
							that.modelContent = res.msg
							that.modelShow = true
						}
					}).catch(res => {
						that.$u.toast('请求失败，请重试！');
					})
				} else {
					that.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			submit: function() {
				if(!this.isAgree){
					this.$u.toast('请同意并阅读协议.');
					return false;
				}
				var that = this
				that.$refs.uForm.validate(valid => {
					if (valid) {
						that.loginFormButtonDisabled = true
						that.form.tab = that.tabIndex
						that.form.captcha_id = that.ws.captchaId
						that.form.account = (that.tabIndex == 0) ? that.form.username:that.form.mobile;
						that.form.weixinCode = that.weixinCode;
						that.$u.post('/addons/fastim/api.user/login', that.form).then(res => {
							that.loginFormButtonDisabled = false
							if (res.code == 1) {
								uni.setStorageSync('u_userInfo', res.data.userinfo);
								uni.setStorageSync('userinfo', res.data.userinfo);
								
								uni.setStorageSync('token', res.data.userinfo.user_token);
								that.ws.init(res.data.userinfo.token, res.data.userinfo.auth_token)
								// uni.switchTab({
								// 	url: '/pages/message/message'
								// })
								
								console.log("登录成功")
								if(that.join == true){
									console.log("进行挑战")
									uni.reLaunch({
										url: '/pages/zupu/join/join'
									})
									return;
								}
								
								
								// #ifdef MP-WEIXIN
								//获取微信授权的code
								this.$refs.privacypopup.tabBarPageShow()
								that.$getweixin().then(()=>{
									this.updatebaseItem({
										key:'isinit',
										val:1,
									})
									
									uni.switchTab({
										url: '/pages/index/index'
									})
									// this.FamilyListfun();
									// setTimeout(()=>{
									// 	uni.redirectTo({
									// 		url:`/pages/zupu/familytrees/familytrees?family_id=${this.family_id}`
									// 	})
									// },1500)									
								})
								// #endif
								
								// this.$store.commit("setinit",1);
								
								// #ifndef MP-WEIXIN
								this.updatebaseItem({
									key:'isinit',
									val:1,
								})
								
								uni.switchTab({
									url: '/pages/index/index'
								})
								// this.FamilyListfun();
								// setTimeout(()=>{
								// 	uni.redirectTo({
								// 		url:`/pages/zupu/familytrees/familytrees?family_id=${this.family_id}`
								// 	})
								// },1500)
								// #endif
								
							} else {
								that.downloadCaptcha()
								that.modelContent = res.msg
								that.modelShow = true
							}
						}).catch(res => {
							that.downloadCaptcha()
							that.loginFormButtonDisabled = false
							that.$u.toast('请求失败，请重试！');
						})
					}
				});
			},
			goRegister: function() {
				uni.navigateTo({
					url: '/pagesim/center/register'
				})
			},
			FamilyListfun(){
				familyList({
					source:0
				}).then(res=>{
					if(res.code==1){
						this.family_id = res.data[0].id;
					}
				})
			},	
			goForget(){
				uni.navigateTo({
					url: '/pagesim/center/forget'
				})
			},
			goindex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
.loginpages{
	background-repeat: no-repeat;
	background-size: cover;
}
page {
	background-color: #F7F7F7;
}
.logform{
	width: 526rpx;
	padding: 4rpx 20rpx;
	border-radius: 18rpx;
	margin: 0 auto;
	background-color: #FFFFFF;
}
.logform_pro{
	width: 526rpx;
	margin: 0 auto;
}
.logform_a{
	width: 300rpx;
	padding: 4rpx 0 4rpx 20rpx;
	border-radius: 18rpx;
	background-color: #FFFFFF;
}
.logstyle{
	width: 526rpx;
	height: 96rpx;
	text-align: center;
	line-height: 96rpx;
	color: #FFFFFF;
	background: #C02E36;
	border-radius: 18rpx;
	font-size: 38rpx;
	margin-top: 20rpx;
}
.welcome{
	color: #323232;
	font-size: 58rpx;
	display: flex;
	justify-content: center;
	margin-bottom: 50rpx;
	font-weight: 600;
}
.login-menu-box {
	width: 100%;
	display: flex;
	margin-bottom: 40rpx;
	justify-content: center;
}
.login-menu {
	display: flex;
	width: 350rpx;
	align-items: center;
	justify-content: center;
	background-color: $--white;
	border-radius: 50rpx;
	left: 50%;
}
.login-button {
	height: 80rpx;
	width: 500%;
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
	line-height: 80rpx;
	color: $--gray;
	border-radius: 50rpx;
	background: $--white;
}
.login-button-active {
	color: $--white;
	background-image: linear-gradient(to bottom right, $themecolor, $themecolor);
}
.login-form {
	display: block;
	width: 78vw;
	margin: 0 auto;
}
.logsend{
	display: flex;
	/* #ifdef MP-WEIXIN */
	padding-left: 30rpx;
	/* #endif */
	align-items: center;
}
.login-footer-box {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	width: 100vw;
}
.login-footer-box-left {
	text-decoration: underline;
	font-size: 28rpx;
	color: #B13B3B;
}
.captcha-img {
	width: 200rpx;
	max-height: 100rpx;
	margin-left: 26rpx;
}

.accordtag{
	padding: 0 40rpx;
}
.radioview{
	display: block; //转换为块状元素
	margin-top: 38rpx; //
}
.atag{
	text-decoration:none; //去下划线
	color: #B13B3B;
	size: 28rpx;
}
.sendcodebtn{
	min-width: 180rpx;
	padding: 0 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 28rpx;
	background-color: #C02E36;
	margin-left: 46rpx;
	border-radius: 12rpx;
}	
</style>
